/*!
 * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
 */
@import '../_tokens/index';

.platform-tags {
  position: relative;
  top: -2px;

  display: flex;
  flex-wrap: wrap;

  margin-bottom: -6px;
  margin-left: -4px;

  @media (width < $breakpoint-tablet-min) {
    margin-top: 0;
    margin-left: 0;

    &--wrapper {
      float: none;

      flex-basis: 100%;

      margin-top: 8px;

      margin-left: -16px;
    }
  }
}

.platform-tag {
  --platform-tag-color: #bababb;

  position: relative;

  padding: 10px 12px;

  cursor: pointer;

  text-transform: capitalize;

  border: 0 none;

  border-radius: var(--size-s1);

  font: var(--font-text-s);
}

.platform-tags .platform-tag {
  display: flex;
  align-items: center;

  padding: 5px 8px;

  font-size: 13px;
}

button.platform-tag {
  position: relative;

  cursor: pointer;

  &:focus-visible {
    z-index: 1;

    outline: var(--focus-outline);
  }
}

.platform-selector-option {
  padding-left: 44px;
}

.platform-tag.js-like,
.platform-selector-option.js-like,
.platform-tag.jvm-like,
.platform-selector-option.jvm-like,
.platform-tag.wasm-like,
.platform-selector-option.wasm-like {
  text-transform: uppercase;
}

.filter-section .platform-tag[data-active] {
  color: #19191c;
  background-color: var(--platform-tag-color);
}

.filter-section .platform-tag.jvm-like[data-active],
.platform-tags .platform-tag.jvm-like {
  --platform-tag-color: #4dbb5f;
}

.filter-section .platform-tag.js-like[data-active],
.platform-tags .platform-tag.js-like {
  --platform-tag-color: #ffc700;
}

.filter-section .platform-tag.native-like[data-active],
.platform-tags .platform-tag.native-like {
  --platform-tag-color: #e082f3;
}

.filter-section .platform-tag.wasm-like[data-active],
.platform-tags .platform-tag.wasm-like {
  --platform-tag-color: #9585f9;
}

@media (hover: hover) {
  .filter-section .platform-tag[data-active]:hover {
    background-image: linear-gradient(var(--color-b08), var(--color-b08), var(--color-b08));
  }
}

.filter-section .platform-tag[data-active]:active {
  color: #fff;
  background-color: rgba(186, 186, 187, 0.7);
}

.filter-section .platform-tag:not([data-active]) {
  text-decoration: none;

  color: var(--color-w50);
  background-color: var(--color-w10);

  &:hover {
    background-color: var(--color-w16);
  }

  &::after {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 12px;
    left: 12px;

    height: 1px;

    content: '';

    background-color: currentColor;
  }
}

.platform-tags .platform-tag::before {
  display: inline-block;

  width: 8px;
  height: 8px;
  margin: 0 4px 0 8px;

  content: '';

  border-radius: 50%;
  background: var(--platform-tag-color);

  font-size: 13px;
  line-height: 1.6;
}
